<template>
    <div>
        <!--工具类-->
        <div>
            <!--搜索栏及其数据导入、导出、添加员工-->
            <div>
                <!--搜索、高级搜索按钮-->
                <div style="display: flex;justify-content:flex-end">
                    <el-input style="width: 300px ;margin-right: 10px"
                              @keydown.enter.native="initEmps"
                              v-model="empName"
                              clearable
                              :disabled="showAdvanceSearchVisible"
                              @clear="initEmps"
                              placeholder="请输入员工姓名进行搜索...">
                    </el-input>
                    <el-button type="primary" icon="el-icon-search" @click="initEmps"
                               :disabled="showAdvanceSearchVisible">搜索
                    </el-button>
                    <el-button type="primary" @click="showAdvanceSearchVisible =!showAdvanceSearchVisible">
                        <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                           aria-hidden="true"/>
                        高级搜索
                    </el-button>
                </div>
                <!--导入数据、导出数据、添加员工-->
                <div>
                    <el-upload
                            style="display: inline-flex;margin-right: 8px"
                            :show-file-list="false"
                            :headers="headers"
                            :before-upload="beforeUpload"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :disabled="importDataDisabled"
                            action="https://jsonplaceholder.typicode.com/posts/">
                        <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">
                            {{ importDataBtnText }}
                        </el-button>
                    </el-upload>
                    <el-button type="success" @click="exportData" icon="el-icon-download">
                        导出数据
                    </el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="showAddEmp">添加员工</el-button>
                </div>
            </div>
            <!--高级搜索框-->
            <transition name="slide-fade"><!--transition vue原生动画-->
                <div v-show="showAdvanceSearchVisible" style="border: 1px solid #409eff; border-radius: 5px; box-sizing: border-box;padding: 5px;
                margin: 10px 0px">
                    <!--第一行 政治面貌、民族、职位、职称、聘用形式-->
                    <el-row>
                        <el-col :span="5">
                            政治面貌:
                            <el-select v-model="searchValue.politicId"
                                       size="mini"
                                       style="width: 130px;"
                                       placeholder="政治面貌">
                                <el-option
                                        v-for="item in politicsstatus"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            民族:
                            <el-select v-model="searchValue.nationId"
                                       size="mini"
                                       style="width: 130px;"
                                       placeholder="民族">
                                <el-option
                                        v-for="item in nations"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            职位
                            <el-select v-model="searchValue.posId"
                                       size="mini"
                                       style="width: 130px;"
                                       placeholder="职位">
                                <el-option
                                        v-for="item in positions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            职称
                            <el-select v-model="searchValue.jobLevelId"
                                       size="mini"
                                       style="width: 130px;"
                                       placeholder="职称">
                                <el-option
                                        v-for="item in joblevels"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="7">
                            聘用形式
                            <el-radio-group v-model="searchValue.engageForm">
                                <el-radio label="劳动合同">劳动合同</el-radio>
                                <el-radio label="劳务合同">劳务合同</el-radio>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                    <!--第二行 所属部门-->
                    <el-row style="margin-top: 10px">
                        <el-col :span="5">
                            所属部门:
                            <el-popover
                                    placement="bottom"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="visibleDepartmentSearch">
                                <el-tree
                                        :data="allDeps"
                                        :props="defaultProps"
                                        default-expand-all
                                        @node-click="searchHandleNodeClick">
                                </el-tree>
                                <div slot="reference" style="width: 130px;display: inline-flex;border: 1px solid #dedede;
                                                height: 24px;border-radius: 5px;cursor: pointer;align-items:
                                                center;font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                     @click="showSearchDepView">{{ inputDepName }}
                                </div>
                            </el-popover>
                        </el-col>
                        <el-col :span="10">
                            入职日期
                            <el-date-picker
                                    v-model="searchValue.beginDateScope"
                                    type="daterange"
                                    size="mini"
                                    value-format="yyyy-MM-dd"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button
                                    size="mini"
                                    icon="el-icon-search"
                                    @click="initEmps('advanced')"
                                    type="primary">搜索
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </div>

        <!--表格-->
        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    border
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        align="left"
                        fixed="left"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50"
                >
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        align="left"
                        width="95"
                >
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        align="left"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚宴状况"
                        width="85"
                >
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        width="50"
                >
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        width="70"
                >
                </el-table-column>
                <el-table-column
                        prop="politicsStatus.name"
                        label="政治面貌"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align="left"
                        width="180"
                >
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        align="left"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        align="left"
                        width="270"
                >
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        align="left"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="joblevel.name"
                        label="职称"
                        align="left"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        label="职位"
                        align="left"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用形式"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="学校"
                        align="left"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        label="专业"
                        align="left"
                        width="150"
                >
                </el-table-column>
                <el-table-column
                        prop="workState"
                        label="在职状态"
                        align="left"
                        width="70"
                >
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        align="left"
                        width="95"
                >
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        align="left"
                        width="95"
                >
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        align="left"
                        width="95"
                >
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        label="合同截止日期"
                        align="left"
                        width="95"
                >
                </el-table-column>
                <el-table-column
                        label="合同期限"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.contractTerm }}</el-tag>
                        年
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        fixed="right"
                        width="200">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmpView(scope.row)" size="mini" style="padding: 3px">编辑</el-button>
                        <el-button size="mini" style="padding: 3px" type="primary">查看高级资料</el-button>
                        <el-button @click="deleteEmp(scope.row)" size="mini" style="padding: 3px" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!--分页-->
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40,50]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--添加员工弹出框-->
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <el-form ref="empForm" :model="emp" :rules="rules">
                        <!--第一行-->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="姓名:" prop="name">
                                    <el-input v-model="emp.name"
                                              prefix-icon="el-icon-edit"
                                              palceholder="请输入员工姓名"
                                              style="width: 150px"
                                              size="mini">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="性别:" prop="gender">
                                    <el-radio-group v-model="emp.gender">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="出生日期:" prop="birthday">
                                    <el-date-picker
                                            v-model="emp.birthday"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择出生日期"
                                            size="mini"
                                            style="width: 150px"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="政治面貌:" prop="politicId">
                                    <el-select v-model="emp.politicId"
                                               size="mini"
                                               style="width: 200px;"
                                               placeholder="政治面貌">
                                        <el-option
                                                v-for="item in politicsstatus"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--第二行-->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="民族:" prop="nationId">
                                    <el-select v-model="emp.nationId"
                                               size="mini"
                                               style="width: 150px;"
                                               placeholder="民族">
                                        <el-option
                                                v-for="item in nations"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="籍贯:" prop="nativePlace">
                                    <el-input v-model="emp.nativePlace"
                                              placeholder="请输入籍贯"
                                              prefix-icon="el-icon-edit"
                                              size="mini"
                                              style="width: 120px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="电子邮箱:" prop="email">
                                    <el-input v-model="emp.email"
                                              placeholder="请输入邮箱"
                                              prefix-icon="el-icon-message"
                                              size="mini"
                                              style="width: 150px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="联系地址:" prop="address">
                                    <el-input v-model="emp.address"
                                              placeholder="请输入地址"
                                              prefix-icon="el-icon-edit"
                                              size="mini"
                                              style="width: 200px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--第三行-->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="职位:" prop="posId">
                                    <el-select v-model="emp.posId"
                                               size="mini"
                                               style="width: 150px;"
                                               placeholder="职位">
                                        <el-option
                                                v-for="item in positions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="职称:" prop="jobLevelId">
                                    <el-select v-model="emp.jobLevelId"
                                               size="mini"
                                               style="width: 150px;"
                                               placeholder="职称">
                                        <el-option
                                                v-for="item in joblevels"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所属部门:" prop="departmentId">
                                    <el-popover
                                            placement="bottom"
                                            title="请选择部门"
                                            width="200"
                                            trigger="manual"
                                            v-model="visible">
                                        <el-tree
                                                :data="allDeps"
                                                :props="defaultProps"
                                                default-expand-all
                                                @node-click="handleNodeClick">
                                        </el-tree>
                                        <div slot="reference" style="width: 150px;display: flex;border: 1px solid #dedede;
                                                height: 24px;border-radius: 5px;cursor: pointer;align-items:
                                                center;font-size: 13px;padding-left: 8px;box-sizing: border-box"
                                             @click="showDepView">{{ inputDepName }}
                                        </div>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="电话号码:" prop="phone">
                                    <el-input v-model="emp.phone"
                                              placeholder="请输入电话号码"
                                              prefix-icon="el-icon-phone"
                                              size="mini"
                                              style="width: 200px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--第四行-->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="工号:" prop="workID">
                                    <el-input v-model="emp.workID"
                                              placeholder="请输入工号"
                                              prefix-icon="el-icon-edit"
                                              size="mini"
                                              disabled
                                              style="width: 150px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="学历:" prop="tiptopDegree">
                                    <el-select v-model="emp.tiptopDegree"
                                               size="mini"
                                               style="width: 150px;"
                                               placeholder="学历">
                                        <el-option
                                                v-for="item in tiptopDegrees"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="毕业院校:" prop="school">
                                    <el-input v-model="emp.school"
                                              placeholder="请输入学校"
                                              prefix-icon="el-icon-school"
                                              size="mini"
                                              style="width: 150px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="专业名称:" prop="specialty">
                                    <el-input v-model="emp.specialty"
                                              placeholder="请输入专业名称"
                                              prefix-icon="el-icon-edit"
                                              size="mini"
                                              style="width: 200px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--第五行-->
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="入职日期:" prop="beginDate">
                                    <el-date-picker
                                            v-model="emp.beginDate"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="入职日期"
                                            size="mini"
                                            style="width: 120px"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="转正日期:" prop="conversionTime">
                                    <el-date-picker
                                            v-model="emp.conversionTime"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="转正日期"
                                            size="mini"
                                            style="width: 120px"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="合同起始日期:" prop="beginContract">
                                    <el-date-picker
                                            v-model="emp.beginContract"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="起始日期"
                                            size="mini"
                                            style="width: 125px"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="合同截止日期:" prop="endContract">
                                    <el-date-picker
                                            v-model="emp.endContract"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="合同截止日期"
                                            size="mini"
                                            style="width: 175px"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!--第六行-->
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="身份证号码:" prop="idCard">
                                    <el-input v-model="emp.idCard"
                                              placeholder="身份证号码"
                                              size="mini"
                                              style="width: 180px">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="聘用形式:" prop="engageForm">
                                    <el-radio-group v-model="emp.engageForm">
                                        <el-radio label="劳动合同">劳动合同</el-radio>
                                        <el-radio label="劳务合同">劳务合同</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="婚宴状况:" prop="wedlock">
                                    <el-radio-group v-model="emp.wedlock">
                                        <el-radio label="已婚">已婚</el-radio>
                                        <el-radio label="未婚">未婚</el-radio>
                                        <el-radio label="离异">离异</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addEmp">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data() {
            return {
                //高级搜索框搜索传的值
                searchValue: {
                    politicId: null,
                    nationId: null,
                    //职位id
                    posId: null,
                    jobLevelId: null,
                    engageForm: '',
                    departmentId: null,
                    //入职日期范围
                    beginDateScope: null,
                },
                //高级搜索框是否展示
                showAdvanceSearchVisible: false,
                headers: {
                    Authorization: window.sessionStorage.getItem('tokenStr')
                },
                //导入数据按钮显示文字
                importDataBtnText: '导入数据',
                //导入数据按钮图标
                importDataBtnIcon: 'el-icon-upload2',
                //导入数据按钮是否可用
                importDataDisabled: false,
                //表格数组
                emps: [],
                loading: false,
                //总条数
                total: 0,
                //当前页
                currentPage: 1,
                //默认一页显示的条数
                size: 10,
                //搜索框员工名字
                empName: '',
                //弹出框是否弹出
                dialogVisible: false,
                //添加员工的数据对象
                emp: {
                    id: null,
                    name: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: null,
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                },
                //民族数组
                nations: [],
                //职称
                joblevels: [],
                //政治面貌
                politicsstatus: [],
                //职位
                positions: [],
                //学历
                tiptopDegrees: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
                //弹出框标题
                title: '',
                //部门的树形控件是否展示
                visible: false,
                //高级搜索的部门的树形控件是否展示
                visibleDepartmentSearch: false,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                //全部部门
                allDeps: [],
                //部门树形控件选择后的数据
                inputDepName: '',
                rules: {
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入员工性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '请输入员工出生日期', trigger: 'blur'}],
                    idCard: [{required: true, message: '请输入身份证号', trigger: 'blur'},
                        {
                            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
                            , message: '身份证号格式不正确', trigger: 'blur'
                        }],
                    wedlock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
                    nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
                    nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
                    politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
                    email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
                    address: [{required: true, message: '请输入地址', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请输入部门', trigger: 'blur'}],
                    jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
                    posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
                    engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
                    tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
                    specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
                    school: [{required: true, message: '请输入学校', trigger: 'blur'}],
                    beginDate: [{required: true, message: '请选择入职日期', trigger: 'blur'}],
                    workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
                    workID: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
                    conversionTime: [{required: true, message: '请选择转正日期', trigger: 'blur'}],
                    notWorkDate: [{required: true, message: '请选择离职日期', trigger: 'blur'}],
                    beginContract: [{required: true, message: '请选择合同起始日期', trigger: 'blur'}],
                    endContract: [{required: true, message: '请选择合同结束日期', trigger: 'blur'}],
                    workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
                }
            }

        },
        methods: {
            /**
             * 初始化表格数据
             */
            initEmps(type) {
                this.loading = true;
                let url = '/employee/basic/getEmployee/?currentPage=' + this.currentPage + '&size=' + this.size;
                //高级搜索
                if (type && type === 'advanced') {
                    if (this.searchValue.politicId) {
                        url += '&politicId=' + this.searchValue.politicId;
                    }
                    if (this.searchValue.nationId) {
                        url += '&nationId=' + this.searchValue.nationId;
                    }
                    if (this.searchValue.posId) {
                        url += '&posId=' + this.searchValue.posId;
                    }
                    if (this.searchValue.jobLevelId) {
                        url += '&jobLevelId=' + this.searchValue.jobLevelId;
                    }
                    if (this.searchValue.jobLevelId) {
                        url += '&jobLevelId=' + this.searchValue.jobLevelId;
                    }
                    if (this.searchValue.engageForm) {
                        url += '&engageForm=' + this.searchValue.engageForm;
                    }
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {
                    url += '&name=' + this.empName;
                }
                this.getRequest(url).then(res => {
                    if (res) {
                        this.total = res.total;
                        this.emps = res.data;
                        this.loading = false;
                    }
                })
            }
            ,
            /**
             * 改变当前页
             * @param currentPage
             */
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.initEmps();
            }
            ,
            /**
             * 改变一页显示的条数
             * @param size
             */
            handleSizeChange(size) {
                this.size = size;
                this.initEmps();
            }
            ,
            /**
             * 展示添加员工的对话框
             */
            showAddEmp() {
                this.title = '添加员工';
                this.emp = {
                    id: null,
                    name: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: null,
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: null,
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                };
                this.inputDepName = '';
                this.getMaxWorkId();
                this.dialogVisible = true;
            },
            /**
             * 初始化民族、职称、政治面貌、部门下拉框的数据
             */
            initData() {
                //判断session中是否有民族信息，如果没有，则调用后台接口查询数据库并存入session
                if (!window.sessionStorage.getItem('nations')) {
                    this.getRequest('/employee/basic/getAllNations').then(res => {
                        if (res) {
                            this.nations = res;
                            window.sessionStorage.setItem('nations', JSON.stringify(res))
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.sessionStorage.getItem('nations'));
                }
                //判断session中是否有职称信息，如果没有，则调用后台接口查询数据库并存入session
                if (!window.sessionStorage.getItem('joblevels')) {
                    this.getRequest('/employee/basic/getAllJoblevels').then(res => {
                        if (res) {
                            this.joblevels = res;
                            window.sessionStorage.setItem('joblevels', JSON.stringify(res))
                        }
                    })
                } else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'));
                }
                //判断session中是否有政治面貌，如果没有，则调用后台接口查询数据库并存入session
                if (!window.sessionStorage.getItem('politicsstatus')) {
                    this.getRequest('/employee/basic/getAllPoliticsStatus').then(res => {
                        if (res) {
                            this.politicsstatus = res;
                            window.sessionStorage.setItem('politicsstatus', JSON.stringify(res))
                        }
                    })
                } else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'));
                }
                //判断session中是否有部门，如果没有，则调用后台接口查询数据库并存入session
                if (!window.sessionStorage.getItem('allDeps')) {
                    this.getRequest('/employee/basic/getAllDepartments').then(res => {
                        if (res) {
                            this.allDeps = res;
                            window.sessionStorage.setItem('allDeps', JSON.stringify(res))
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
                }
            },
            /**
             * 初始化职位的下拉框数据
             */
            initPositions() {
                this.getRequest('/employee/basic/getAllPositions').then(res => {
                    if (res) {
                        this.positions = res;
                    }
                })
            },
            /**
             * 获取最大工号
             */
            getMaxWorkId() {
                this.getRequest('/employee/basic/getMaxWorkId').then(res => {
                    if (res) {
                        this.emp.workID = res.obj;
                    }
                })
            },
            /**
             * 显示部门的树形控件
             */
            showDepView() {
                this.visible = !this.visible;
            },
            /**
             * 显示高级搜索的部门的树形控件
             */
            showSearchDepView() {
                this.visibleDepartmentSearch = !this.visibleDepartmentSearch;
            },
            /**
             * 树形控件节点点击事件
             * @param data 节点数据
             */
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentId = data.id;
                this.visible = !this.visible;
            },
            /**
             * 高级搜索树形控件节点点击事件
             * @param data 节点数据
             */
            searchHandleNodeClick(data) {
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.visibleDepartmentSearch = !this.visibleDepartmentSearch;
            },
            /**
             * 添加员工&&编辑员工
             */
            addEmp() {
                this.$refs.empForm.validate((valid) => {
                    if (valid) {
                        //如果emp的id有值，则是编辑，否则是新增
                        if (this.emp.id) {
                            this.putRequest('/employee/basic/updateEmployee', this.emp).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        } else {
                            this.postRequest('/employee/basic/addEmployee', this.emp).then(res => {
                                if (res) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }

                    }
                });
            },
            /**
             * 删除员工
             * @param data
             */
            deleteEmp(data) {
                this.$confirm('此操作将永久删除' + data.name + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest(' /employee/basic/deleteEmployee/' + data.id).then(res => {
                        if (res) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            /**
             * 展示编辑员工的对话框
             * @param data
             */
            showEditEmpView(data) {
                this.title = '编辑员工信息';
                this.dialogVisible = true;
                this.emp = data;
                this.inputDepName = data.department.name;
                //初始化职位信息
                this.initPositions();
            },

            /**
             * 导出数据
             */
            exportData() {
                this.downLoadRequest('/employee/basic/exportEmployees');
            },
            /**
             * 处理导入数据的状态
             */
            beforeUpload() {
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataBtnText = '正在导入';
                this.importDataDisabled = true;
            },
            /**
             * 文件导入成功
             */
            onSuccess() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.initEmps();
                this.importDataDisabled = false;
            },
            /**
             * 文件导入失败
             */
            onError() {
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataBtnText = '导入数据';
                this.importDataDisabled = false;
            }

        }
        ,
        mounted() {
            this.initEmps();
            this.initData();
            this.initPositions();
        }
    }
</script>

<style scoped>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
